{extend name="./app/admin/view/main.html" /}
{block name="title"}
短内容{if condition='$id'}编辑{else/}发布{/if} - {__block__}{/block}
{block name="style"}
<style>
    .simditor-body {
        height: 400px;
        overflow-y: auto;
    }
    .tags-btn:hover {
        background-color: #dddee1;
    }
    .ivu-select-group-title {
        padding-left: 15px;
    }
    .ivu-select-group .ivu-select-item{
        padding-left: 30px;
    }
</style>
{/block}

{block name="main"}
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">短内容</h4>
        <h5 class="sub-title"><a href="{$mipInfo.domain}/{$Think.config.admin}/tinyinfo/tinyinfo/">全部短内容</a>
            <i class="ion-chevron-right"></i> {if condition='$id'}编辑{else/}发布{/if}</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='publishPost'>
            <span><Icon type="checkmark-round"></Icon> 提交保存</span>
        </button>
    </div>
</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="content-box">
        <section class="mip-box">
            <section class="mip-box-body">
                <i-Form :label-width="120" :model="tinyinfo" :rules="tinyinfo.ruleValidate" class="m-t-md v-h" :class='vShow'>

                    <Form-Item label="短内容Code" prop="tinyinfo_code">
                        <i-Select v-model="tinyinfo.tinyinfo_code" style="width:400px">
                            <i-Option v-for="item in codeList" :value="item.code" :key="item.code">{{item.code}} - {{ item.description }}</i-Option>
                        </i-Select>
                    </Form-Item>

                    <Form-Item label="标题" prop="title">
                        <i-Input style="width: 400px;" v-model="tinyinfo.title" placeholder="请输入标题..."></i-Input>
                    </Form-Item>

                    <Form-Item label="短内容链接" prop="link_url">
                        <i-Input style="width: 400px;" v-model="tinyinfo.link_url" placeholder="请输入短内容链接..."></i-Input>
                    </Form-Item>

                    <Form-item label="上传主题图片">

                        <div class="fbadmin-upload-img-box" style="width:600px">
                            <img class="fbadmin-upload-img fb-bg-nopic" :src="tinyinfo.img_url" style="width:600px;min-width: 200px;min-height:100px"/>
                            <i-button v-if="tinyinfo.img_url != ''" class="fbadmin-upload-clear" type="success" @click="clearImgUrlSrc"
                                      size="small" shape="circle">清除</i-button>
                        </div>
                        <div style="width:150px;display: inline-block">
                            <Upload :accept="img_url_accept" :format="img_url_format"
                                    name="fileDataFileName" :max-size="img_url_size"
                                    :headers="{'terminal':'pc','access-key':authInfo.access_key,'uid':authInfo.uid,'access-token':authInfo.access_token}"
                                    :on-success="onUploadImgUrlSuccess" :on-error="onUploadMainPicError" :on-exceeded-size="onUploadMainPicExceededSize"
                                    action="{$mipInfo.domain}/{$Think.config.admin}/ApiAdminUpload/defaultImgUpload">
                                <i-button type="button" icon="ios-cloud-upload-outline">上传主题图片</i-button>
                            </Upload>
                        </div>
                        <div style="width:150px;display: inline-block">
                        <i-button type="button" icon="ios-cloud-upload-outline" @click="showFilebox">选择服务器图片</i-button>
                        </div>
                        主图图片的格式必须为{{ img_url_format }}，文件必须小于{{ img_url_size/1000 }}M。
                    </Form-item>

                    <Form-Item label="内容">
                        <i-input v-model="tinyinfo.description" type="textarea" :autosize="{minRows:3}" style="width: 600px;" placeholder="请输入内容..."></i-input>
                    </Form-Item>

                    <Form-item label="状态">
                        <i-switch v-model="tinyinfo.status">
                            <span slot="open">启用</span>
                            <span slot="close">禁用</span>
                        </i-switch>
                    </Form-item>

                </i-Form>
                <Spin size="large" fix v-if="vShow==''"></Spin>
                <div class="text-center">
                    <i-button type="dashed" onclick="javascript:history.back()">取 消</i-button>
                    <i-button type="success"  @click='publishPost'>
                        <span><Icon type="checkmark-round"></Icon> 提交保存</span>
                    </i-button>

                </div>
            </section>
        </section>
    </section>

</main>
{/block}

{block name="javascript"}
{__block__}
<script type="text/javascript" src="{$mipInfo.domain}/assets/common/js/pb_filebox.js?v={$mipInfo.scriptVersion}"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            fb:null,
            vShow: '',
            codeList: [],
            img_url_accept: 'image/jpeg,image/pjpeg,image/gif,image/png,image/bmp',
            img_url_format: ['jpg', 'jpeg', 'gif', 'bmp', 'png'],
            img_url_size: 1000,
            tinyinfo: {
                id: '{$id}',
                title: '',
                tinyinfo_code: '{$code}',
                img_url: '',
                link_url: '',
                description: '',
                status: true,

                ruleValidate: {
                    tinyinfo_code: [
                        {required: true, message: '请输入短内容Code', trigger: 'blur'}
                    ],

                },
            },
            saveStatus: 'add',
        },
        watch: {
        },
        mounted() {
            if(this.tinyinfo.id==0){
                this.saveStatus = 'add';
            }else{
                this.saveStatus='edit';
            }
            this.getCodeList();
            this.getTinyinfoInfo();
        },
        methods: {
            onUploadImgUrlSuccess(resp,file,files){
                this.tinyinfo.img_url = resp.data;
            },
            onUploadMainPicError(resp,file,files){},
            onUploadMainPicExceededSize(file,files){
                this.$Message.warning('主题图片不能超过'+(this.img_url_size/1000)+'M');
            },
            clearImgUrlSrc(){
                this.tinyinfo.img_url='';
            },
            getCodeList(){
                var _this = this;
                var url1 = '{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfoCode/get_list';
                var d1 = {};

                this.$mip.ajax(url1,d1 ).then(function(res) {
                    if (res.code == 1) {
                        _this.codeList = res.data.list;
                    }
                });
            },
            
            //编辑时
            getTinyinfoInfo() {

                var _this = this;
                if(_this.tinyinfo.id==0){
                    _this.vShow='v-s';
                    return;
                }

                this.$mip.ajax('{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfo/get_by_id', {
                    id: _this.tinyinfo.id,
                }).then(function(res) {
                    if(res.code == 1) {
                        var itemInfo = res.data;
                        _this.tinyinfo.description = itemInfo.description==null?'':itemInfo.description;
                        _this.tinyinfo.title = itemInfo.title==null?'':itemInfo.title;
                        _this.tinyinfo.tinyinfo_code = itemInfo.tinyinfo_code==null?'':itemInfo.tinyinfo_code;
                        _this.tinyinfo.img_url = itemInfo.img_url==null?'':itemInfo.img_url;
                        _this.tinyinfo.link_url = itemInfo.link_url==null?'':itemInfo.link_url;

                        if (itemInfo.status && itemInfo.status==1) {
                            _this.tinyinfo.status = true;
                        } else {
                            _this.tinyinfo.status = false;
                        }

                    }

                    _this.vShow='v-s';

                });


            },
            //开始发布
            publishPost: function(param) {
                var timestamp = Date.parse(this.publish_time);
                timestamp = timestamp / 1000;

                if(this.tinyinfo.id==''){
                    this.saveStatus='add';
                }else{
                    this.saveStatus='edit';
                }

                if(this.tinyinfo.tinyinfo_code==''){
                    this.$Message.error('短内容Code必须选择，不允许为空。');
                    return;
                }

                var d1= this.tinyinfo ;
                d1.saveStatus = this.saveStatus;

                var url1='{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfo/do_save';
                this.$mip.ajax(url1,d1).then(d1r=>{
                    if(d1r.code==1){
                        this.$Message.success({'content':d1r.msg,onClose:function(){history.back()}});
                    }
                });
            },
            showFilebox(){
                var _this = this;
                if(_this.fb==null){
                    _this.fb=new PbFilebox({ load_url:'{$mipInfo.domain}/{$Think.config.admin}/ApiAdminUpload/list_img',
                        del_url: '{$mipInfo.domain}/{:config("admin")}/ApiAdminUpload/del_img',
                        method: 'post',
                        max_select_count: 1,
                        pagesize: 21,
                        headers:{'terminal':'pc','access-key':authInfo.access_key,'uid':authInfo.uid,'access-token':authInfo.access_token},
                        onselect: function (res) {
                            if(res!=null && res.length>0){
                                _this.tinyinfo.img_url = res[0].imgUrl;
                            }

                        }
                    });
                }

                this.fb.show();
            }

        }
    })
</script>
{/block}